<template>
	<div>
		<div style="text-align:center">
			<input v-model="contry"
				style="width:60px;height:30px;border:1px solid #213142;border-radius:5px;margin:10px;text-align:center;"
				placeholder="国家" />
			<input v-model="province"
				style="width:60px;height:30px;border:1px solid #213142;border-radius:5px;margin:10px;text-align:center;"
				placeholder="省份" />
			<input id="city"
				style="width:60px;height:30px;border:1px solid #213142;border-radius:5px;margin:10px;text-align:center;"
				placeholder="城市" />
		</div>
		<div class="region-picker-wrapper visibility-control" id="region-picker">
			<div class="body">
				<div class="select-zone middle"></div>
				<div class="region-picker">
					<div id="couPicker"></div>
				</div>
				<div class="region-picker">
					<div id="proPicker"></div>
				</div>
				<div class="region-picker">
					<div id="cityPicker"></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import UIPickerView from '/src/components/picker/UIPickerView.js';
	import CAAnimation from '/src/components/picker/CAAnimation.js';
	import '/src/components/picker/UIPickerView.css'
	import { main } from '../../util/util.js'
	export default {
		data() {
			return {
				city:'',
				contry:'',
				province:''
			}
		},
		beforeCreate() {
			main();
		},
		mounted() {
			this.$nextTick(()=>{
				this.init()
			})
		},
		methods: {
			init() {
				let pickself = this
				var coup = UIPickerView.createPickerView({
					dataSource: [{
						key: '',
						value: '中国'
					}, {
						key: '',
						value: '美国'
					}],
					id: 'couPicker',
					constraintsId: 'wower',
					kUP: {
						kUPCELLHEIGHT: 40,
						kUPFRICTION: 0.003
					},
					valueChange: function(data) {
						pickself.contry = data.value;
						//up1.UPRender(data1);
					}
				});
				var pro = UIPickerView.createPickerView({
					dataSource: [{
						key: '',
						value: '陕西'
					}, {
						key: '',
						value: '山东'
					}],
					id: 'proPicker',
					constraintsId: 'wower1',
					kUP: {
						kUPCELLHEIGHT: 40,
						kUPFRICTION: 0.003
					},
					valueChange: function(data) {
						pickself.province = data.value;
						//up1.UPRender(data1);
					}
				});
				var cityp = UIPickerView.createPickerView({
					dataSource: [{
						key: '',
						value: '西安'
					}, {
						key: '',
						value: '渭南'
					}],
					id: 'cityPicker',
					constraintsId: 'wower2',
					kUP: {
						kUPCELLHEIGHT: 40,
						kUPFRICTION: 0.003
					},
					valueChange: function(data) {
						pickself.city = data.value;
						//up1.UPRender(data1);
					}
				});
				var animaed = CAAnimation.createAnimation({
					id: 'region-picker'
				});
				animaed.start();
			}
		}

	}
</script>

<style>
</style>
